import {useEffect, useState} from 'react';
import {Device} from '../types';
import {setCurDevice} from '../store';
import {searchDeviceInLAN} from '../utils';
import {Pressable, View} from 'react-native';

function SearchDevice() {
  const [devices, setDevices] = useState<Device[]>([]);
  useEffect(() => {
    searchDeviceInLAN((device: Device) => {
      setDevices([...devices, device]);
    });
  }, []);
  return (
    <View>
      {devices.length === 0 ? (
        <View>searching devices...</View>
      ) : (
        <View>
          {devices.map(device => (
            <Pressable onPress={() => setCurDevice(device)}>
              {device.name}
            </Pressable>
          ))}
        </View>
      )}
    </View>
  );
}
export default SearchDevice;
